<template>
  <div style="height: 6vh;background-image: linear-gradient(to right, #fffacd, #add8e6);padding: 10px 20px">
    <h1 style="margin: 0;line-height:60px;font-size:20px;font-weight: bold">评论审核</h1>
  </div>
  <el-card style="margin: 20px;height: 120px;">
    <span>评论测试</span>
    <hr/>
    <el-form :inline="true">
      <el-form-item style="width: 270px;">
        <el-input type="text" placeholder="请输入评论" v-model="testComment.content" required ></el-input>
      </el-form-item>
      <el-form-item style="width: 100px;">
        <el-button type="primary" @click="auditComment" >评论</el-button>
      </el-form-item>
      <el-form-item style="width: 270px;">
        <el-input type="text" placeholder="请输入评论" v-model="comment.content" @input="loadComment" ></el-input>
      </el-form-item>
      <el-form-item style="width: 270px;">
        <el-select placeholder="请选择审核状态" v-model="comment.status" @change="loadComment">
          <el-option label="通过" value="1"></el-option>
          <el-option label="已经人工审核" value="2" ></el-option>
          <el-option label="已修改敏感句" value="3" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="width: 200px;">
        <el-button type="primary" @click="loadComment" >查找</el-button>
        <el-button type="primary" @click="resetComment" >重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 20px">
    <span>人工审核</span>
    <el-table :data="commentArray" >
      <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="评论ID" prop="commentId" align="center" ></el-table-column>
      <el-table-column label="原始评论" prop="content" align="center"  ></el-table-column>
      <el-table-column label="审核后的评论" prop="auditContent" align="center"></el-table-column>
      <el-table-column label="审核状态" prop="status" align="center" :formatter="auditStatusFormatter" ></el-table-column>
      <el-table-column label="操作" align="center" v-if="comment.status==='3'">
        <template #default="scope" >
          <el-button type="primary" link @click="passComment(scope.row.commentId,scope.row.content,scope.row.auditContent)">放行原评论</el-button>
          <el-button type="primary" link  @click="confirmComment(scope.row.commentId)" >确认审核</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" v-if="comment.status==='2'">
        <template #default="scope" >
          <el-button type="primary" link @click="backComment(scope.row.commentId,scope.row.auditContentBak)">撤回审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:30px;float: right;">
      <!--layout="total(总数), sizes(每页总数), prev(上一页), pager(当前页), next(下一页), jumper(跳转页)"
       :pager-count="4" 表示显示4个页码
       :page-sizes="[5, 10, 15, 20]" 表示一共有几个"每页显示多少条"选项
       current-page当前页码 page-size当前页码的条数 total总条数 这三个变量需要和实际数据双向绑定
       :total="400" 表示总条数，需要双向绑定
       @size-change="handleSizeChange" 表示每页显示多少条改变时触发的事件
       @current-change="handleCurrentChange" 表示当前页码改变时触发的事件 -->
      <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20]"
          v-model:current-page="currentPage"
          v-model:page-size="currentSize"
          v-model:total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

</template>
<script setup>
//定义评论属性
import {onMounted, ref} from "vue";
import qs from 'qs'
import {ElMessage} from "element-plus";
import axios from "axios";

const comment = ref({
  status:'3',
  content:''
})
const testComment=ref({
  content:'',
})
const auditComment=()=>{
  let data=qs.stringify(testComment.value);
  axios.post(BASE_URL+'/p1/admin/comment',data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success('评论成功');
      comment.value={
        status: '3',
      };
      testComment.value={
        content:''
      }
      loadComment();
    }else{
      ElMessage.error(response.data.msg);
    }
  })

}
onMounted(()=>{
  loadComment();
})
//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  loadComment()
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  loadComment()
}
const commentArray=ref([])
//获取未审核通过评论
const loadComment=()=>{
  comment.value.pageSize=currentSize.value
  comment.value.pageNum=currentPage.value
  let data=qs.stringify(comment.value);
  axios.get(BASE_URL+'/p1/admin/load/?'+data).then((response)=>{
    if(response.data.code==2000){
      commentArray.value=response.data.data.list;
      total.value=response.data.data.total;
      console.log(commentArray.value)
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const auditStatusFormatter = (row, column, cellValue, index) => {
  if (cellValue == 1) {
    return '通过';
  } else if (cellValue == 2) {
    return '已人工审核';
  } else if (cellValue == 3) {
    return '已修改敏感句';
  } else {
    // 默认返回值或处理未定义的情况
    return '未知状态';
  }
};
//定义放行方法
const passComment=(commentId,content,auditContent)=>{
  if (confirm('是否放行{'+content+'}该评论?')) {
    comment.value.status='2';
    comment.value.commentId=commentId
    comment.value.content=content
    comment.value.auditContent=auditContent
    let data = qs.stringify(comment.value);
    axios.post(BASE_URL + '/p1/admin/pass/' ,data).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('放行成功');
        comment.value={
          status: '3',
        };
        loadComment();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
//定义确认AI审核结果方法
const confirmComment=(commentId)=>{
  comment.value.commentId=commentId
  comment.value.status='2'
  console.log(comment.value)
  let data=qs.stringify(comment.value);
    axios.post(BASE_URL + '/p1/admin/confirm/' ,data).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('确认成功');
        comment.value={
          status: '3',
        }
        loadComment();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
}
//定义撤回方法
const backComment=(commentId,auditContentBak)=>{
  comment.value.commentId=commentId
  comment.value.auditContentBak=auditContentBak
  comment.value.status='3'
  let data=qs.stringify(comment.value);
  axios.post(BASE_URL + '/p1/admin/back/' ,data).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('撤回成功');
      comment.value={
        status: '2',
      }
      loadComment();
    } else {
      ElMessage.error(response.data.msg);
    }
  })

}
//设置重置按钮
const resetComment=()=>{
  comment.value={
    status:'3'
  }
  loadComment();
}


</script>


